<!--conf
<sample>
              <product version="2.6" edition="std"/>
                     <modifications>
                            <modified date="100609"/>
                     </modifications>
               </sample>
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Combination</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	
	<style>
        .dhx_axis_item_x{
            font-size: 11px
        }
        .dhx_axis_item_y{
            font-size: 11px
        }
	</style>
	<script>
	var data = [
		{ sales:3.0,  sales2:12.0, year:"2003" },
		{ sales:3.0, sales2:10.0, year:"2004" },
		{ sales:3.4,  sales2:9.0, year:"2005" },
		{ sales:4.1, sales2:8.0, year:"2006" },
		{ sales:4.3, sales2:9.0, year:"2007" },
		{ sales:7.6,  sales2:11.0, year:"2008" },
		{ sales:7.8,  sales2:13.0, year:"2009" },
		{ sales:7.2,  sales2:10.0, year:"2010" },
		{ sales:5.3,  sales2:14.0, year:"20011" },
		{ sales:4.8,  sales2:12.0, year:"2012" }
	];
	
	window.onload = function(){
		chart1 =  new dhtmlXChart({
			view:"bar",
			container:"chart",
		    value:"#salesA#",
			color:"#00ccff",
			width: 32,
			gradient: "falling",
			alpha: 0.8,
			padding:{
				left:30,
				bottom: 50
			},
			radius:0,
			yAxis:{
			},
			xAxis:{
				lines:true,
				title:"Sales per year",
				template:"#id#"
			},
			legend:{
					layout:"y",
					width:100,
					align:"right",
					valign:"middle",
					values:[
						{text:"Company A",color:"#00ccff"},
						{text:"Company B",color:"#e9df40"},
						{text:"Average",color:"#b25151",toggle:true,markerType: "item"}
					]
				},
			group:{
				by:"#year#",
				map:{
					salesA:["sales2",getAny],
					salesB:["sales",getAny],
					salesAverage:["#sales#",getAverage]
				}
			}
		})
		chart1.addSeries({
			view:"area",
			alpha:0.4,
			value:"#salesB#",
			color:"#e9df40"
		})
		chart1.addSeries({
	        view:"line",
			value:"#salesAverage#",
	        item:{
	            radius:2,
		        borderColor: "#7fa505"
	        },
	        line:{
	            color:"#7fa505",
	            width:2
	        }
		})
		chart1.parse(data,"json");
	}
	function getAny(property, data){
		return data[0][property];
	}
	function getAverage(property,data){
		var count = 0;
		var summ = 0;
		for(var i = 0; i < data.length; i++){
			summ += (parseFloat(data[i].sales)||0);
			summ += (parseFloat(data[i].sales2)||0);
			count +=2;
		}
		return count?summ/count:0;
	}
	</script>
</head>
<body >
	<div id="chart" style="width:600px;height:250px;border:1px solid #A4BED4;"></div></td>
			
</body>
</html>
